<template>
  <div>
    <div class="article-container-parent">
      <div
        class="overview-container"
        style="
          position: fixed;
          top: 200px;
          left: 210px;
          max-height: 600px;
          max-width: 450px;
          height: 600px;
        "
        v-if="title != null"
      >
        <div class="image-container">
          <div class="title-container">
            <i class="el-icon-reading" style="font-size: 1.5em"></i>
            <span
              style="font-size: 1.5em; font-weight: bold; margin-right: 10px"
              >《{{ title }}》</span
            >
            <el-button
              type="text"
              @click="redirectToOriginal"
              icon="el-icon-link"
              style="margin-right: 20px; font-size: 1.5em"
              v-if="refUrl != ''"
              >查看原文</el-button
            >
          </div>
          <div>
            <i class="el-icon-picture" style="font-size: 1.5em"></i>
            <span
              style="font-size: 1.5em; font-weight: bold; margin-right: 10px"
              >封面</span
            >
          </div>
          <div
            style="
              position: relative;
              max-width: 70%;
              max-height: 80%;
              overflow: hidden;
            "
          >
            <img
              :src="coverUrl"
              alt="没有封面"
              style="
                width: 100%;
                height: 100%;
                /* max-width: 100%;
                max-height: 100%; */
                object-fit: contain;
              "
            />
          </div>
        </div>
      </div>

      <div class="article-container" v-if="undoList.length !== 0">
        <div
          v-html="articleContent"
          class="rich-text-content"
          v-if="articleContent != null && !isLoading"
        ></div>
        <!-- <div slot="empty" v-else-if="articleContent == null && !isLoading">
          <el-empty :description="discription">
            <el-button
              type="primary"
              @click="applyReview($store.state.user.id)"
              >{{ buttonText }}</el-button
            >
          </el-empty>
        </div> -->
        <div v-else>
          <el-skeleton :rows="15" animated />
        </div>
      </div>
      <div v-else>
        <el-empty :description="discription">
          <el-button
            type="primary"
            @click="applyReview($store.state.user.id)"
            >{{ buttonText }}</el-button
          >
        </el-empty>
      </div>
    </div>

    <div class="comment-container" v-if="articleContent != null">
      <el-button
        class="pass-button"
        type="success"
        icon="el-icon-check"
        @click="submitReview(0)"
      ></el-button>
      <el-button
        class="reject-button"
        type="danger"
        icon="el-icon-close"
        @click="submitReview(1)"
      ></el-button>
      <el-button
        class="comment-button"
        type="primary"
        icon="el-icon-edit"
        @click="showCommentBox"
      ></el-button>

      <el-dialog
        :visible.sync="isCommentBoxVisible"
        title="审核意见"
        width="400px"
      >
        <el-input v-model="form.comment" placeholder="我没意见"></el-input>
        <el-button
          class="comment-dialog-content"
          type="primary"
          @click="submitComment"
          >保存</el-button
        >
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { update, apply, detail } from '@/api/review';
export default {
  data() {
    return {
      comment: '',
      isCommentBoxVisible: false, // 评论框是否可见
      articleContent: null,
      form: {
        id: null,
        articleId: null,
        comment: null,
        phase: null,
        result: null,
      },
      title: null,
      coverUrl: null,
      refUrl: null,
      haveTask: true,
      isLoading: true,
    };
  },

  computed: {
    ...mapState('review', [
      'reviewList',
      'total',
      'finish',
      'reviewerList',
      'undoList',
    ]),

    ...mapState('user', ['id']),

    discription() {
      return this.haveTask ? '任务完成了' : '暂时没有审核任务了';
    },
    buttonText() {
      return this.haveTask ? '申请审核任务' : '求你别卷了';
    },
  },

  watch: {
    undoList() {
      console.log('undoList被更新');
      if (this.undoList.length == 0) {
        this.updateData0();
      } else {
        this.updateData1();
      }
      this.isLoading = false;
    },
  },
  async mounted() {
    console.log('workbench的mounted开始');
    console.log('开始请求undoList');
    await this.$store.dispatch('review/fetchUndo', { reviewId: this.id });
    // this.articleList = this.getArticleList();
    console.log('成功加载了undoList');
    console.log(this.undoList.length);
    this.isLoading = false;
    console.log('workbench的mounted结束');
  },
  methods: {
    redirectToOriginal() {
      // 跳转到 this.refUrl 所在的网址
      window.open(this.refUrl, '_blank');
    },
    showCommentBox() {
      this.isCommentBoxVisible = true;
    },
    submitComment() {
      this.isCommentBoxVisible = false;
    },

    async getArticle(articleId) {
      console.log('开始获取文章');
      this.isLoading = true;
      const params = {
        articleId: articleId,
      };
      const res = await detail(params);
      console.log(res);
      if (res.status) {
        console.log('已经获取到文章');
        this.isLoading = false;
        return res.data;
      } else {
        this.$message({
          message: '文章获取异常',
          type: 'error',
          showClose: true,
        });
      }
      this.isLoading = false;
    },

    updateData0() {
      this.articleContent = null;
      this.form = {
        id: null,
        articleId: null,
        comment: null,
        phase: null,
        result: null,
      };
      this.coverUrl = null;
      this.title = null;
      this.refUrl = null;
    },

    async updateData1() {
      console.log('articleList有数据，按理要开始更新页面');
      const articleReview = this.$store.state.review.undoList[0];
      const article = await this.getArticle(articleReview.articleId);
      console.log(article);
      const prefix = 'localhost:8088';
      this.articleContent = article.content;
      this.coverUrl = article.coverUrl;
      this.title = articleReview.title;
      this.refUrl = article.refUrl;

      this.form = {
        id: articleReview.id,
        articleId: articleReview.articleId,
        comment: null,
        phase: articleReview.phase,
        result: -1,
      };
      this.haveTask = true;

      console.log(this.form.coverUrl);
    },

    async applyReview(id) {
      const params = {
        reviewId: id,
      };
      const res = await apply(params);
      console.log(res);
      console.log(res.data);
      console.log(res.status);
      // console.log(res.data.status);
      if (res.status) {
        if (res.data == 1) {
          this.$message({
            message: '申请成功',
            type: 'success',
            showClose: true,
          });
          this.haveTask = true;
        } else {
          this.haveTask = false;
        }
        console.log('开始请求undoList');
        this.$store.dispatch('review/fetchUndo', { reviewId: this.id });
        console.log('成功加载了undoList');
      } else {
        this.$message({
          message: '申请失败，请重试',
          type: 'error',
          showClose: true,
        });
      }
    },

    async submitReview(result) {
      console.log(this.form);
      this.form.result = result;
      update(this.form).then((res) => {
        if (res.status) {
          this.$message({
            message: '上传成功',
            type: 'success',
            showClose: true,
          });
          console.log('开始请求undoList');
          this.$store.dispatch('review/fetchUndo', { reviewId: this.id });
          console.log('成功加载了undoList');
        }
      });
    },
  },
};
</script>

<style scoped>
.article-container-parent {
  position: relative; /* 设置为相对定位 */
}
.article-container {
  /* width: 66%; 2/3 屏幕宽度 */
  height: 100%;
  max-width: 800px; /*设 置最大宽度，可以根据需要调整*/
  /* margin: 100px, auto; 居中 */
  /* margin-right: 50%; */
  margin-left: 500px;
  margin-top: 50px;
  border: 3px solid rgb(66, 161, 255, 0.5);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(66, 161, 255, 0.5);
  text-align: center;
  background-color: white;
  overflow-y: auto; /* 添加垂直滚动条 */
  /* max-height: 600px; 设置最大高度，根据实际需求调整 */
  height: 620px;
}

.rich-text-content {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  color: #333;
  line-height: 1.8; /* 增大行距 */
}

.approval-options {
  margin-top: 10px;
}

.comment-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  position: absolute;
  bottom: 300px;
  border: 3px solid rgb(66, 161, 255, 0.5);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(66, 161, 255, 0.5);
  right: 20px;
  height: 300px; /* 调整容器高度，根据实际需求修改 */
}

.comment-button .pass-button .reject-button {
  margin-bottom: 100px;
}
.comment-button {
  border-radius: 50%; /* 圆形按钮 */
  width: 70px;
  height: 70px;
  font-size: 24px;
  margin-right: 10px;
  position: relative; /* 添加相对定位 */
  z-index: 2;
}

.pass-button {
  border-radius: 50%; /* 圆形按钮 */
  width: 70px;
  height: 70px;
  font-size: 24px;
  margin-left: 10px;
  margin-right: 10px;
  position: relative; /* 添加相对定位 */
  z-index: 2;
}

.reject-button {
  border-radius: 50%; /* 圆形按钮 */
  width: 70px;
  height: 70px;
  font-size: 24px;
  margin-right: 10px;
  position: relative; /* 添加相对定位 */
  z-index: 2;
}

.comment-dialog-content {
  text-align: center; /* 内容居中 */
  margin-top: 20px; /* 上边距 */
  margin-bottom: 20px; /* 下边距 */
}

.comment-dialog-content .el-input,
.comment-dialog-content .el-button {
  margin-bottom: 20px; /* 为输入框和按钮添加下边距 */
}

.comment-dialog-content .el-button {
  margin-top: 20px; /* 为按钮添加上边距 */
}

.overview-container {
  border: 3px solid rgb(66, 161, 255, 0.5);
  border-radius: 10px;
  margin: 10px; /* 外边距，根据实际需求调整 */
  padding: 10px; /* 内边距，根据实际需求调整 */
  background-color: white;
}
</style>
